<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
    class="an-userlist-table">
      <el-table-column
        label="头像"
        sortable
        width="80">
        <template slot-scope="scope">
          <img :src="scope.row.avatarurl" width="60px" height="60px">
        </template>
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="标签"
        width="100"
        :filters="[{ text: '中性', value: '中性' },{ text: '男', value: '男' }, { text: '女', value: '女' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="selectgender(scope.row.gender)"
            disable-transitions>{{scope.row.gender}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="logintime"
        label="注册日期"
        sortable>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-view"
            @click="handleselect(scope.$index, scope.row)"></el-button>
          <el-button
            type="text"
            icon="el-icon-location-outline"
            @click="showMap(scope.row.openid)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:15px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pagenumber">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog
      title="打卡记录"
      :visible.sync="dialogVisible"
      width="500px">
      <el-table
        :data="addresslog"
        stripe
        class="an-dialog-table"
        >
        <el-table-column
          prop="time"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <map-location :IsdialogVisible.sync="visible"  :openid="openid" v-if="visible"></map-location>
  </div>
</template>

<script>
  import { getuserinfo,selectuserdaka } from '@/api/wxqiandao'
  import mapLocation from '@/components/mapLocation'
  export default {
    components:{
      mapLocation
    },
    data() {
      return {
        list: null,
        listLoading: true,
        dialogVisible: false,  //控制弹框显示与不显示
        sexdata:{
          "0":'中性',
          '1':'男',
          '2':'女'
        },
        addresslog:'',
        pagenum:{
          count: 1,  //当前页
          ncun: 10 //每页条数
        },
        openid: '',
        visible: false,
        total:0 //数据总条数
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getuserinfo(this.pagenum).then(response => {
          let newdata = response.data.list;
          for(let i = 0; i < newdata.length; i++){
            newdata[i].gender = this.sexdata[newdata[i].gender];
          }
          this.list = newdata;
          this.total = response.data.total;
          this.listLoading = false;
        })
      },
      filterTag(value, row) {
        return row.gender === value;
      },
      selectgender(value){
        let res;
        if(value === '男'){
          res = 'primary'
        }else if(value === '女'){
          res = 'success'
        }else{
          res = 'warning'
        }
        return res;
      },
      handleselect(index, row){
        selectuserdaka(row.openid).then(response=>{
          this.addresslog = response.data;
          this.dialogVisible = true;
        })
      },
      showMap(openid){
        this.openid = openid
        console.log(this.visible)
        this.visible = true
      },
      pagenumber(val){
        this.pagenum.count = this.pagenum.ncun * (val - 1) + 1
        this.listLoading = true;
        this.fetchData()
      }
    }
  }
</script>

<style scoped>

</style>
